<template>
  <a-layout class="layout-container">
    <!-- 侧边栏 -->
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible :width="220" breakpoint="lg"
      class="sider">
      <div class="logo">
        <h2 v-if="!collapsed">AI知行学堂</h2>
        <h2 v-else>AI</h2>
      </div>

      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="vertical" @select="handleSelect">
        <a-menu-item key="/admin/tenant">
          <template #icon>
            <book-outlined />
          </template>
          <span>租户管理</span>
        </a-menu-item>
        <a-menu-item key="/admin/role">
          <template #icon>
            <book-outlined />
          </template>
          <span>角色管理</span>
        </a-menu-item>
        <a-menu-item key="/admin/user">
          <template #icon>
            <book-outlined />
          </template>
          <span>用户管理</span>
        </a-menu-item>
         <a-menu-item key="/admin/menu">
          <template #icon>
            <book-outlined />
          </template>
          <span>菜单管理</span>
        </a-menu-item>
        <a-menu-item key="/admin/material">
          <template #icon>
            <book-outlined />
          </template>
          <span>物料管理</span>
        </a-menu-item>

        <a-menu-item key="courses">
          <template #icon>
            <book-outlined />
          </template>
          <span>课程列表</span>
        </a-menu-item>
        <a-menu-item key="learning-track">
          <template #icon>
            <line-chart-outlined />
          </template>
          <span>智能学习跟踪</span>
        </a-menu-item>
        <a-menu-item key="quiz">
          <template #icon>
            <question-circle-outlined />
          </template>
          <span>智能测验</span>
        </a-menu-item>
        <a-menu-item key="ai-assistant">
          <template #icon>
            <robot-outlined />
          </template>
          <span>AI智能助教</span>
        </a-menu-item>
        <a-menu-item key="/common/community">
          <template #icon>
            <team-outlined />
          </template>
          <span>学习社区</span>
        </a-menu-item>
        <a-menu-item key="/common/messages">
          <template #icon>
            <message-outlined />
          </template>
          <span>消息</span>
        </a-menu-item>
        <a-menu-item key="/common/settings">
          <template #icon>
            <setting-outlined />
          </template>
          <span>账户设置</span>
        </a-menu-item>
               <a-menu-item key="/common/codesmith">
          <template #icon>
            <setting-outlined />
          </template>
          <span>代码生成</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <!-- 主内容区 -->
    <a-layout>
      <!-- 顶部导航 -->
      <a-layout-header class="header">
        <div class="header-left">
          <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
          <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
        </div>

        <div class="header-right">
          <a-dropdown>
            <a class="ant-dropdown-link" @click.prevent>
              <a-avatar :size="32" :src="appStore.contextUser.avatar" />
              <span class="user-name">{{ appStore.contextUser.email }}</span>
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <user-outlined />
                  <span>个人中心</span>
                </a-menu-item>
                <a-menu-item @click="handleLogout">
                  <logout-outlined />
                  <span>退出登录</span>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>

      <!-- 内容区 -->
      <a-layout-content class="content">
        <div class="content-inner">
          <router-view />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import {
  BookOutlined,
  LineChartOutlined,
  QuestionCircleOutlined,
  RobotOutlined,
  TeamOutlined,
  MessageOutlined,
  SettingOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  LogoutOutlined,
} from '@ant-design/icons-vue';
import { useAppStore } from '@/store';

const appStore = useAppStore();
const router = useRouter();
const collapsed = ref(false);
const selectedKeys = ref<string[]>(['settings']);

const handleLogout = () => {
  appStore.logout();
  router.push({ path: '/' });
};

const handleSelect = function({ key }:{ key: string }){
  router.push({
    path:key
  })
}
// 响应式处理
watch(() => router.currentRoute.value.path, (newPath) => {
  // 根据路由更新选中的菜单项
  const pathMap: Record<string, string> = {
    '/settings': 'settings',
    '/courses': 'courses',
    // 其他路由映射...
  };

  for (const [path, key] of Object.entries(pathMap)) {
    if (newPath.startsWith(path)) {
      selectedKeys.value = [key];
      break;
    }
  }
}, { immediate: true });
</script>

<style scoped lang="less">
.layout-container {
  min-height: 100vh;

  .sider {
    background: #001529;

    .logo {
      height: 64px;
      padding: 16px;
      color: white;
      text-align: center;
      overflow: hidden;

      h2 {
        color: white;
        margin: 0;
        white-space: nowrap;
      }
    }
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    .trigger {
      font-size: 18px;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }

    .user-name {
      margin-left: 8px;
    }
  }

  .content {
    margin: 24px;
    min-height: calc(100vh - 112px);

    .content-inner {
      padding: 24px;
      background: #fff;
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .layout-container {
    .sider {
      position: fixed;
      z-index: 100;
      height: 100vh;

      &:not(.ant-layout-sider-collapsed) {
        width: 100% !important;
        max-width: 100% !important;
      }
    }

    .content {
      margin-left: 0;
    }
  }
}
</style>